<template>
  <div>
    <a-card :bordered="false">
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="() => { this.formVisible = true }" :disabled="total >= 5">新建轮播位</a-button>
      </div>

      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
      >
        <span slot="pic" slot-scope="text, record">
          <img style="max-height: 100px; max-width: 200px; min-height: 50px; min-width: 100px;" :src="record.attachments[0] && record.attachments[0].url">
        </span>

        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical"/>

            <a-popconfirm placement="top" @confirm="confirmDelete(record)">
              <template slot="title">
                确定要删除吗?
              </template>
              <a>删除</a>
            </a-popconfirm>
          </template>
        </span>
      </s-table>
    </a-card>

    <banner-form :visible="formVisible" :data="formRaw" @visible="formVisibleEvent" @refreshList="refreshList"></banner-form>
  </div>
</template>

<script>
  import { Ellipsis, STable } from '@/components'
  import { deleteBanner, getBannerList } from '@/api/system'
  import CourierCompanyForm from '@/views/system/courier_company/Form'
  import BannerForm from '@/views/system/banner_management/Form'

  export default {
    name: 'BannerList',
    components: {
      BannerForm,
      CourierCompanyForm,
      STable,
      Ellipsis
    },
    data () {
      return {
        formVisible: false,
        formRaw: {},
        total: 0,
        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '图片轮播位',
            scopedSlots: { customRender: 'pic' }
          },
          {
            title: '跳转链接',
            dataIndex: 'link'
          },
          {
            title: '排序号',
            dataIndex: 'sort_id'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return getBannerList(Object.assign(parameter, this.queryParam)).then(res => {
            this.total = res.total
            return res
          })
        }
      }
    },
    methods: {
      handleEdit (record) {
        this.formVisible = true
        this.formRaw = record
      },
      confirmDelete (record) {
        deleteBanner(record.id).then(() => this.$refs.table.refresh())
      },
      formVisibleEvent (val) {
        this.formVisible = val
        this.formRaw = {}
      },
      refreshList () {
        this.$refs.table.refresh()
      }
    }
  }
</script>
